<template>
	<view  class="w100 bg_white">
		<view class="p10">
				<view :class="userForm.name == ' ' ? 'none':'user-message'">
					用户姓名：
					<input class="uni-input" v-model="userForm.name" :class="chooseinput?'bg_8e8e':'bg_white'"  :readonly='chooseinput' :value="userForm.name!=null?userForm.name:'未知'" name="input" disabled placeholder="请输入名字" />
				</view>
				<view class="user-message" v-if="sexindex != 0">
					用户性别：<span class="p5" :class="chooseinput?'bg_8e8e':'bg_white'" style="padding-left:12px;padding-right: 12px;">{{sexpicker[sexindex]}}</span>
				</view>
				<view class="user-message" v-if="sexindex == 0">
					用户性别：<span class="p5" :class="chooseinput?'bg_8e8e':'bg_white'" style="padding-left:12px;padding-right: 12px;"  v-if="sexindex == 0">{{sexpicker[sexindex]}}</span>
					<view  @click="sexsex = true"  class="mL10 bglin borderr8 borderall p2 pL5 col_white pR5">点击选择性别</view>
					<u-select v-model="sexsex" :list="lists"  @confirm="confirmsex"></u-select>		
				</view>
				<view :class="userForm.address == '' ? 'none':'user-message'" >
					用户地址：
					<input class="uni-input" :class="chooseinput?'bg_8e8e':'bg_white'"  v-model="userForm.address" :readonly='chooseinput' :value="userForm.address!=null?userForm.address:'未知'" name="input" disabled placeholder="请输入地址" />
				</view> 
				<view class="user-message" v-show="!userForm.identitycard == '' && !userForm.identitycard == 0">
					身份证号：
					<input  class="uni-input" :class="chooseinput?'bg_8e8e':'bg_white'"  :readonly='chooseinput' :value="userForm.identitycard!=null?userForm.identitycard:'未知'" name="input" disabled placeholder="请输入身份证号" disabled />
				</view>
				<view :class="userForm.mobile == '' ? 'none':'user-message'" >
					手机号码：
					<input  class="uni-input" :class="chooseinput?'bg_8e8e':'bg_white'"  :readonly='chooseinput' :value="userForm.mobile!=null?userForm.mobile:'未绑定'" name="input" disabled placeholder="请输入手机号码" />
					<span class="mL10 bglin borderr8 borderall p2 pL5 col_white pR5" @click="gochangephone">更换</span>
				</view>
				<view :class="userForm.role_name == ' ' ? 'none':'user-message'" >
					用户身份：
					<input class="uni-input" :class="chooseinput?'bg_8e8e':'bg_white'"  :value="userForm.role_name!=null?userForm.role_name:'访客'" name="input" disabled placeholder="请输入用户身份" disabled />
				</view>
				<view :class="userFormnew.member.member_frequency == ' ' ? 'none':'user-message'" >
					用户积分：
					<input class="uni-input" :class="chooseinput?'bg_8e8e':'bg_white'"  :value="userFormnew.member.member_frequency!=null?userFormnew.member.member_frequency:'0'" name="input" disabled placeholder="请输入用户身份" disabled />
				</view>
				
				<!-- <view class="uni-btn-v ">
					<button form-type="submit" class="submit submitsm" @click="nocoosesubmit" v-if="!chooseinput">取消</button>
					<button form-type="submit" class="submit bglin submitsm" @click="submit"  v-if="!chooseinput">确定</button>
					
				</view> -->
				<view class="uni-btn-v ">
					<button form-type="submit" class="submit submitsm" @click="showuser()" >重新认证</button>
					<button form-type="submit" class="submit submitsm" @click="userexit()" >注销</button>
				</view>
		</view>
		<!-- 分享弹窗 -->
		<view mode="top-right" class="scan-box" v-if="visible">
			<view class="scan-item">
				<view class="scan-content">				
					<image src="../../static/slide-list/fork.png" class="scan-btn" @click="nologout"></image>
					<view class="title tCenter bold pT5">
						注销账号
					</view>
					<view class="w90 mauto input pT10">
						<view class="sm_titme">
							请问注销资料的原因：
						</view>
						<view class="pL10 pR10 pT5 pB5 borderall f14">
							<input type="text" style="font-size: 14px;" value="" v-model="logouttext" placeholder="注销原因" />
						</view>
						
					</view>
					<view class="scan-text" style="padding-bottom: 20upx;">
						<view class="w50 mauto flex flexcenter f16">
							<span class='bglin2 pT2 pB2 pL10 pR10 col_white borderr5' @click='nologout'>取消</span>
							<span class='bglin pT2 pB2 pL10 pR10 col_white borderr5' @click='addlogout'>确定</span>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<backnext></backnext>
		
		<!-- 底部导航 -->
		<footernav pagePath='userMessage'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import {userinfo,useredit,userlogout} from '../../common/api/user.js'; //引进requst方法
import {check,isNumber,isEmpty} from '@/common/graceChecker.js';
import {deptudeluser} from '../../common/api/department.js'; //引进requst方法
export default {
	data() {
		return {
			sexpicker:['未知','男','女'],
			sexindex:0,
			visible:false,
			logouttext:'',
			chooseinput:true,
			userFormnew:'',
			userForm: {
				sex:0,
				company_name:"",
			},
			sexsex:false,
			lists: [
				{
					value: '1',
					label: '男'
				},
				{
					value: '2',
					label: '女'
				},
			],
		};
	},
	methods: {
		nologout(){
			this.logouttext='';
			this.visible=false;
		},
		addlogout(){
			let that=this;
			if(!this.logouttext){
				uni.showToast({
				    icon: 'none',
				    title: '请输入注销原因',
				    duration: 2000
				});
				return
			}else{
				userlogout({remark:this.logouttext}).then(res=>{
					if(res.data.code === 200){
						
						uni.showModal({
						    title: '',
						    content: res.data.message,						
							
							buttonText: '确定',
							confirmText: "确定",
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									that.visible=false;
									this.logouttext='';
									window.location.replace('/wap/#/pages/shouquan/shouji')
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}else{
						uni.showModal({
						    title: '',
						    content: res.data.message,						
							
							buttonText: '确定',
							confirmText: "确定",
						    success: function (res) {
						        if (res.confirm) {									
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
					
				})
			}
		},
		choosecomnter(){
				let _that = this
				uni.showModal({
				    title: '确认退出公司?',
				    // content: '这是一个模态弹窗',
				    success: function (res) {
				        if (res.confirm) {
							deptudeluser({uid:_that.userForm.id,type:'c'}).then(res=>{
								uni.showToast({
									icon: 'none',
									title: res.data.message,
									duration: 2000
								});
							//	_that.userForm.company_name='';
							 // _that.backrefresh('123')
								window.location.replace('/wap/#/pages/user/user')
								
							})
				            // console.log('用户点击确定');
				        } else if (res.cancel) {
							/*bann*/
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});
		},
		showuser(){
			uni.navigateTo({
			    url: '../shouquan/shengfen?type=repeat',
			});
		},
		userexit(){
			let that=this;
			if(this.userFormnew.member.member_frequency!=0){
					uni.showModal({
					    title: '',
					    content: '尚有积分，暂时不能注销。',		
						buttonText: '确定',
						confirmText: "确定",
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
								// that.addcompany();//去认证公司
								that.visible=false;
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return;
			}
			uni.showModal({
			    title: '',
			    content: '请确定是否需要注销资料？',		
				buttonText: '确定',
				confirmText: "确定",
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
						// that.addcompany();//去认证公司
						that.visible=true
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		/*更换身份证号码--未开放*/
		gochangeidcard(){
			uni.showToast({
			    icon: 'none',
			    title: '功能未开放.',
			    duration: 2000
			});
			return
			console.log(this.userForm)
			let tmpuserinfo = JSON.stringify(this.userForm)
			uni.navigateTo({
			    url: '../shouquan/shouji?tmpuinfo='+tmpuserinfo+'&type=chphone'
			});
			
		},
		gochangegongshi(){
			uni.showToast({
			    icon: 'none',
			    title: '功能未开放.',
			    duration: 2000
			});
			return
			console.log(this.userForm)
			let tmpuserinfo = JSON.stringify(this.userForm)
			uni.navigateTo({
			    url: '../shouquan/shouji?tmpuinfo='+tmpuserinfo+'&type=chphone'
			});
			
		},
		
		/*更换手机号码*/
		gochangephone(){
			console.log(this.userForm)
			let tmpuserinfo = JSON.stringify(this.userForm)

			uni.navigateTo({
			    url: '../shouquan/shouji?tmpuinfo='+tmpuserinfo+'&type=chphone'
			});
		},
		sexchange(e){
			this.sexindex = e.target.value
		},
		nocoosesubmit(){
			this.chooseinput=true;
		},
		coosesubmit(){
			this.chooseinput=false;
		},
		submit() {
			console.log(this.userForm)
			if(!check(this.userForm.mobile,'phoneno')){
				 return
			}
			if(!check(this.userForm.identitycard,'shengfen')){
				 return
			}
			 
			// uni.reLaunch({
			// 	url: '/pages/user/user'
			// });
			this.userForm.type = 'edit'
			if(this.sexindex == 2){
				this.userForm.sex = 2
				}else if(this.sexindex == 1){
					this.userForm.sex = 1
				}
			
			useredit(this.userForm).then(res=>{
				if(res.data.code === 200){
					uni.showToast({
					    icon: 'none',
					    title: '修改成功',
					    duration: 2000
					});
					this.chooseinput=true;
				}else{
					uni.showToast({
					    icon: 'none',
					    title: '网络繁忙,请稍后再试',
					    duration: 2000
					});
					
				}

			})
		},
		confirmsex(e){
			if(e[0].value == 1){
				useredit({sex:1}).then(res=>{
					console.log("res1",res)
				       if(res.data.code === 200){
				         uni.showToast({
				          icon: 'none',
				          title: '修改成功',
				         duration: 2000
				   });
				   uni.reLaunch({
				   	url:'userMessage'
				   })
				   }
			});
		}else{
			useredit({sex:2}).then(res=>{
				console.log("res2",res)
				       if(res.data.code === 200){
				         uni.showToast({
				          icon: 'none',
				          title: '修改成功',
				         duration: 2000
				   });
				   uni.reLaunch({
				   	url:'userMessage'
				   })
				   }
			});
		}
	},
	onLoad() {
		userinfo({}).then(res=>{
			console.log(res)
			this.userForm=res.data.data;
			this.userFormnew=res.data;
			var sexl=res.data.data.sex;
			this.userForm.sex=sexl;
				var thisidcard=this.userForm.identitycard;
				if(thisidcard){
					var strcard=thisidcard.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2");
					this.userForm.identitycard=strcard
				}
			
			if(sexl==1){
				this.sexindex = 1
				this.userForm.sex='男';	
			}else if(sexl==2){
				this.sexindex = 2
				this.userForm.sex='女';
			}else{
				this.sexindex = 0
				this.userForm.sex='未知';
				
			}
			
		});
	},
	filters:{
		sexfiter(value){
			
		}
	},
	}		
};
</script>

<style>
.none{
	display: none;
}
.user-message {
	padding: 5px 10px;
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	border-bottom: 1px solid #ccc;
	display: flex;
	align-items: center;
	width: 90%;
	margin: 0 auto;
}
.submit {
	width: 192px;
	height: 42px;

	color: rgba(255, 255, 255, 1);
	background-color: rgba(212, 48, 48, 1);
	border-radius: 8px;
	font-size: 15px;
	line-height: 42px;
	text-align: center;
	margin: auto;
	margin-top: 50px;
}
.bglin{
	background-color: #007aff;
	margin-left: 5px;
}

.bglin2{
	background-color: rgba(212, 48, 48, 1);
	margin-left: 5px;
}
.submitsm{width: 130px;}
.uni-btn-v{display: flex;}

.scan-box{
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.3);
		z-index:991;
	}
	.scan-item{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		position:relative;
		margin:0 auto;
		width:80%;
		height:100%;
		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		opacity:1;

	}
	.scan-content{
		position:relative;
		width: 460upx;
		height: 310upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	
	.scan-text{
		position: absolute;
		bottom: 40upx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.scan-share{
		width: 100%;
		height: 100%;
	}
	.scan-img{
		width: 300upx;
		height: 300upx;
		margin: auto;
		display: block;
		position: absolute;
		top: 60upx;
		left: 50upx;
		z-index: 99;
	}
	.scan-btn{
		top:-30upx;
		left:auto;
		right:-30upx;
		bottom:auto;
		position:absolute;
		width:64upx;
		height:64upx;
		border-radius:50%;
		z-index:99999;
		display: flex;
	}
</style>